import { nextTick } from 'vue'
import * as echarts from 'echarts'
import { onBeforeUnmount } from 'vue'
import { onMounted, ref } from 'vue'
import { portrait } from '@/api/spotCheck/spotCheck'
/**
 * 社会组织风险预警分类
 */
export function useOrganizationalScoring() {
  let myChart8: any
  let myChart7: any
  let myChart6: any
  onMounted(() => {
    setTimeout(() => {
      portrait().then((res) => {
        createWaringCharts(res)
      })
    }, 500)
  })

  onBeforeUnmount(() => {
    window.addEventListener('resize', resize)
  })
  const days = ref(7)
  function createWaringCharts(res: any) {
    console.log('res', res)
    const y = []
    const x = ['0-60', '60-80', '80-100', '100以上']
    for (const i in res) {
      if (x.includes(i)) {
        y.push(res[i])
      }
    }
    const organizationalScoring = echarts.init(
      document.getElementById('organizationalScoring')
    )
    const option = {
      tooltip: {},
      grid: {
        top: 10,
        left: 30,
        right: 0,
        bottom: 20
      },
      xAxis: {
        data: x,

        axisLine: {
          show: true // 显示 X 轴线
        },
        axisTick: {
          show: true // 显示 X 轴刻度线
        },
        splitLine: {
          show: false // 隐藏 X 轴网格线
        },
        axisLabel: {
          color: '#fff' // 设置 Y 轴刻度标签颜色
        }
      },

      yAxis: {
        name: '个数',
        axisLine: {
          show: false // 显示 Y 轴线
        },
        axisTick: {
          show: false // 显示 Y 轴刻度线
        },
        splitLine: {
          show: false // 隐藏 Y 轴网格线
        },
        axisLabel: {
          color: '#fff' // 设置 Y 轴刻度标签颜色
        },
        minInterval: 100
      },
      series: [
        {
          name: '组织评分',
          type: 'bar',
          barWidth: '10', // 设置柱状图宽度，百分比
          data: y,
          itemStyle: {
            // 设置柱状图渐变色从上往下
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向：从上到下
              [
                { offset: 0, color: '#007DDD' }, // 起始颜色
                { offset: 1, color: '#013F84' } // 结束颜色
              ]
            )
          },
          label: {
            show: true,
            position: 'top', // 标签显示在柱状图上方
            color: '#00A5FE', // 标签字体颜色
            fontSize: 14 // 标签字体大小
          }
        }
      ]
    }

    nextTick(() => {
      window.addEventListener('resize', resize)
      organizationalScoring.setOption(option)
    })
  }

  function resize() {
    setTimeout(() => {
      myChart6?.resize()
      myChart7?.resize()
      myChart8?.resize()
    }, 200)
  }
}
